<template>
	<div class="mbB">
	<div class="mainHomeBox">
		<div class="leftBox">
			<div class="infoB">
				<div class="infoTop">
					<div style="float:left">
						<el-image :src="require('@/assets/img/info.png')" style="width: 25px;float: left;"></el-image>
					</div>
					站内通知
				</div>
				<div class="infoBottom">EarlySleep Egg3.0</div>
			</div><br />
			<div class="lanmuB">
				<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#ffffff"
					text-color="#1d1d1d" active-text-color="#ffd04b">
					<el-menu-item index="1">
						<div class="jishu"
							style="float: left;margin-top: 0.1rem; margin-right: 0.2rem;cursor: pointer;list-style-type: none;">
							Java
						</div>
					</el-menu-item>
					<el-menu-item index="2">
						<div class="jishu"
							style="float: left;margin-top: 0.1rem; margin-right: 0.2rem;cursor: pointer;list-style-type: none;">
							前端
						</div>
					</el-menu-item>
					<el-menu-item index="3">
						<div class="jishu"
							style="float: left;margin-top: 0.1rem; margin-right: 0.2rem;cursor: pointer;list-style-type: none;">
							SpringBoot
						</div>
					</el-menu-item>
					<el-menu-item index="4">
						<div class="jishu"
							style="float: left;margin-top: 0.1rem; margin-right: 0.2rem;cursor: pointer;list-style-type: none;">
							算法
						</div>
					</el-menu-item>
					<el-menu-item index="5">
						<div class="jishu"
							style="float: left;margin-top: 0.1rem; margin-right: 0.2rem;cursor: pointer;list-style-type: none;">
							求职
						</div>
					</el-menu-item>
					<el-menu-item index="6">
						<div class="jishu"
							style="float: left;margin-top: 0.1rem; margin-right: 0.2rem;cursor: pointer;list-style-type: none;">
							技术
						</div>
					</el-menu-item>
					<el-menu-item index="7">
						<div class="jishu"
							style="float: left;margin-top: 0.1rem; margin-right: 0.2rem;cursor: pointer;list-style-type: none;">
							杂项
						</div>
					</el-menu-item>

				</el-menu>
			</div>
			<br />
			<div class="smallLeftB">
				<div class="searchBox">
					<div class="searchTitle">全局搜索</div>
				</div>
				<div class="zaoshuidan">
					<el-image :src="require('@/assets/img/logo.png')" style="width: 45px;float: left;"></el-image>
					<span
						style="float: left;color: #8c939d;font-size: 0.15rem;margin-top: 0.15rem;margin-left: 0.1rem;">早睡蛋</span>
				</div>
				<div class="kaiyuan">
					<el-image :src="require('@/assets/img/gitee.jpeg')"
						style="width: 35px;float: left;margin-left:0.07rem"></el-image>
					<span
						style="float: left;color: #8c939d;font-size: 0.15rem;margin-top: 0.1rem;margin-left: 0.2rem;">Gitee</span>
				</div>

			</div>


			<div class="blogList">
				<div class="blogCard" v-for="oneBlog in blogList" :key="oneBlog.id">
					<div class="blogTitleBox"><span @click="goShowArticle(oneBlog.id)"
							class="blogTitle">{{oneBlog.title}}</span></div>
					<div class="footerBox">
						<div class="timeBox">
							<el-image :src="require('@/assets/img/time.png')"
								style="width: 20px;float: left;"></el-image>
							<span style="margin-top:1rem">{{changeTime(oneBlog.createTime)}}</span>
						</div>
						<div class="writerBox"><span>{{oneBlog.writer}}</span></div>
					</div>
				</div>
				<div class="block">
					<el-pagination class="pageB" background layout="prev, pager, next" :total="total"
						:current-page="currentPage" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import {
		postRequest,
		getRequest
	} from "../utils/api";
	import {
		setCookie,
		setCookie2,
		clearCookie,
		getCookie
	} from "../utils/cookie";
	import moment from "moment"
	import axios from 'axios' //引入axios

	export default {
		data() {
			return {
				blogList: [], //博客列表
				currentPage: 1, //初始页
				pageSize: 15, //每页的数据
				total: 1, //总数
				dialogVisible3: false,
				avatarUrl: "",
				fit: "cover",
				imageUrl: "",
				articleCount: "",

			}
		},

		created() {
			const _this = this;
			// _this.getAvator();
			_this.getArticleCount();
			_this.articleByTimePage((_this.currentPage) * 15 - 15, _this.pageSize);
		},

		methods: {

			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},

			//获取头像
			getAvator() {
				const _this = this;
				postRequest("/admin/getAvator").then((res) => {
					_this.avatarUrl = res.data.data;
				});
			},


			//获取文章数量
			getArticleCount() {
				const _this = this;
				postRequest("/admin/articleCount").then((res) => {
					var t = res.data.data;
					_this.articleCount = t;
					_this.total = t;
				});
			},

			//获取博客列表
			getBlogList() {
				const _this = this;
				getRequest("/article/getAllArticle").then((res) => {
					_this.blogList = res.data.data;
				});
			},

			//按时间分页查询文章
			articleByTimePage(currentPage, pageSize) {
				var _this = this;
				getRequest("/article/articleByTimePageRedis/" + currentPage + "/" + pageSize)
					.then((res) => {
						_this.blogList = res.data.data;
					});
			},

			//翻页事件
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				// 点击每页显示的条数时，显示第一页
				this.articleByTimePage((this.currentPage) * 15 - 15, this.pageSize);
			},

			//时间戳转时间
			changeTime(time) {
				return moment(new Date(parseInt(time))).format("YYYY-MM-DD");
			},

			//跳到指定文章
			goShowArticle(id) {
				const _this = this;
				setCookie2("currentArticleID", id);
				_this.$router.push("/showarticle");
			},

			openHead() {
				const token = getCookie("lrv-etonegg");
				if (token == null || token == "") {
					return;
				}
				this.dialogVisible3 = true;
				this.imageUrl = this.avatarUrl
			},
			closeAvatar() {
				this.imageUrl = "";
			},
			beforeAvatarUpload(file) {
				const _this = this;
				//上传前的函数
				//上传前对图片类型和大小进行判断
				const isJPG = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/gif";
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					_this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
				}
				if (!isLt2M) {
					_this.$message.error("上传头像图片大小不能超过 2MB!");
				}
				//校验成功上传文件
				if (isJPG && isLt2M == true) {
					//将文件转化为formdata数据上传
					let fd = new FormData();
					fd.append("file", file);
					// post上传图片
					axios({
							method: "post",
							url: "http://localhost:8785/api/admin/updateAvator",
							data: fd,
							headers: {
								"content-type": "multipart/form-data",
							},
						})
						.then((res) => {
							_this.$message.success("更新成功");
							_this.getAvator();
							_this.imageUrl = res.data.data;


						})
				}
				return isJPG && isLt2M;
			},
		}
	}
</script>

<style lang="less" scoped>
	@import '../assets/css/mainhome.css';
</style>
